<template>
  <PullRefresh v-model="state.refreshing" class="white-wrap" @refresh="onRefresh">
    <List
      v-model="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <slot v-for="(item, i) in state.list" :key="i" :item="item" :index="i"></slot>
    </List>
  </PullRefresh>
</template>
<script setup>
import { PullRefresh, List } from 'vant'

const props = defineProps({
  onQuery: {
    type: Function,
    required: true
  }
})

const state = reactive({
  loading: false,
  finished: false,
  refreshing: true,
  list: []
})
console.log(state, props)
let pageNo = ref(1)
let pageSize = ref(10)

const onRefresh = async () => {
  pageNo.value = 1
  state.refreshing = true
  state.finished = false
  onLoad()
}

const onLoad = async () => {
  state.loading = true
  if (!state.refreshing) {
    state.refreshing = true
    pageNo.value++
  } else {
    pageNo.value = 1
  }
  console.log(pageNo, pageSize, { pageNo: pageNo.value, pageSize: pageSize.value })
  const res = await props.onQuery({ pageNo: pageNo.value, pageSize: pageSize.value })
  state.loading = false
  console.log(res)
  state.list = pageNo.value === 1 ? res.list : [...state.list, ...res.list]
  state.finished = res.total <= pageNo.value * pageSize.value
  state.refreshing = false
}
</script>
